<template>
	<div class="app">
		<div class="title">Register</div>
		<form @submit="formSubmit" class="form-login">
			<div class="form-input">
				<div class="input-img">
					<img class="input-image" src="@/assets/images/username.png" />
				</div>
				<input type="text" class="input-content register-content" placeholder="用户名,至少包含1个字母和1个数字,6~20字"
					placeholder-style="color: #c7c7c7;" maxlength='20' name="username" />
			</div>
			<div class="form-input">
				<div class="input-img">
					<img class="input-image" src="@/assets/images/username.png" />
				</div>
				<input type="text" class="input-content register-content" placeholder="昵称,1~10字"
					placeholder-style="color: #c7c7c7;" maxlength='10' name="nickname" />
			</div>
			<div class="form-input">
				<div class="input-img">
					<img class="input-image" src="@/assets/images/password.png" />
				</div>
				<input type="password" class="input-content register-content" placeholder="密码,至少包含1个字母和1个数字,6~20字"
					placeholder-style="color: #c7c7c7;" maxlength='20' name="password" />
			</div>
			<div class="form-input">
				<div class="input-img">
					<img class="input-image" src="@/assets/images/password.png" />
				</div>
				<input type="password" class="input-content register-content" placeholder="请再次输入密码"
					placeholder-style="color: #c7c7c7;" maxlength='20' name="vpassword" />
			</div>
			<div class="return-login" @click="login">已有账号，返回登录</div>
			<button class="form-button" form-type="submit">注册</button>
		</form>
		<div v-if="tip" class="tip-layer">
			<div class="tip">{{tipContent}}</div>
		</div>
	</div>
</template>

<script>
	import axios from 'axios';
	import {
		showTips
	} from '@/assets/js/common.js';
	export default {
		name: 'register',
		data() {
			return {
				httpUrl: 'http://qgm1.fengjian123.com/service9501/',
				tipContent: '',
				tip: 0,
			};
		},
		methods: {
			formSubmit: function(e) {
				e.preventDefault();
				const formData = new FormData(e.target);
				const username = formData.get('username');
				const nickname = formData.get('nickname');
				const password = formData.get('password');
				const vpassword = formData.get('vpassword');
				const usernameRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,20}$/;
				const nicknameRegex = /^.{1,10}$/;
				const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,20}$/;
				if (!usernameRegex.test(username) || !nicknameRegex.test(nickname) || !passwordRegex.test(password) ||
					!passwordRegex.test(vpassword)) {
					showTips(this, '用户名/昵称/密码格式不正确');
					return;
				}

				axios.post(this.httpUrl + 'user/register', {
						username,
						nickname,
						password,
						vpassword,
					})
					.then(res => {
						if (res.data.err == 0) {
							showTips(this, '注册成功，返回登录');
							setTimeout(() => {
								this.$router.push('/login');
							}, 1000);
						} else {
							showTips(this, res.data.msg);
							console.log(res.data.msg);
						}
					})
					.catch(error => {
						console.error("登录失败，请检查网络", error);
						showTips(this, '登录失败，请检查网络');
					});
			},
			login: function() {
				this.$router.push('/login');
			},
			tips: function(content) {
				showTips(this, content);
			},
		},
	}
</script>

<style scoped>
	@import url('@/assets/css/login-index.css');
</style>